@charset "utf-8";

@import "reset";
@import "iconfont";
@import "register";
@import "login";
@import "personal";
@import "topseach";
@import "gimc";
$font-size:64px;
    
html{
    font-size: 64px;
}
@function r($px){
    @return $px/$font-size*1rem;
}
.web{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    header{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: r(90px);
        background: #b20000;
        .header-box{
            display: flex;
            justify-content: space-between;
            height: r(90px);
            .liebiao{
                i{
                    font-size: 23px;
                    margin-left: r(23px);
                    color: #ffffff;
                }
            }
            .header-img{
                width: r(264px);
                img{
                    width: 100%;
                }
            }
            .header-bottom{
//              width: r(43px);
                margin-right: r(17px);
                i{
                    display: inline-block;
                    height: r(42px);
                    width: r(42px);
                    border: 1px solid #FFFFFF;
                    border-radius: 50%;
                    color: #FFFFFF;
                    font-size: r(26px);
                    text-align: center;
                    line-height: r(42px);
                }
            }
        }
    }
    
    .content{
        position: absolute;
        top: r(90px);
        width: 100%;
        overflow-x: hidden;
        overflow-y: scroll;
        bottom: r(95px);
        -webkit-overflow-scrolling: touch;
        .nav-title{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: r(100px);
            background: rgba(0,0,0,.3);
            >a{
                display: -webkit-box;
                color: #FFFFFF;
                font-size: r(25px);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding-top: r(24px);
                margin-left: r(30px);
                margin-right: r(24px);
            }
            .nav-bottom{
                display: flex;
                justify-content: space-between;
//              padding-top: r(24px);
                padding-left: r(30px);
                padding-right: r(24px);
                color: #FFFFFF;
                i{
                    &:nth-of-type(2){
                        padding-left: r(48px);
                    }
                }
                p{
                    font-size: 12px;
                }
            }
        }
        .content-top{
            width: 100%;
            border-bottom: 25px solid #f5f5f5;
            padding: r(30px) r(30px) r(33px) r(29px);
            &:nth-of-type(2){
                border-bottom: 0;
            }
            .text{
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #e2e2e2;
                font-size: 0;
                &:nth-of-type(2){
                    padding-top: r(16px);
                }
                .text-l{
                    width: r(373px);
                    h3{
                        white-space: normal;
                        font-size: r(24px);
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    span{
                        font-size: r(18px);
                        display: inline-block;
                        color: #c5c5c5;
                        padding-bottom: r(24px);
                        padding-top: r(30px);
                        overflow: hidden;
                        text-overflow: ellipsis;
                        &:nth-of-type(2){
                            width: r(266px);
                            text-align: right;
                            font-size:10px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                }
                .text-r{
                    width: r(208px);
                    height: r(118px);
                    a{
                        display: block;
                    }
                    img{
                        width: 100%;
                    }
                }
            }
        }
        .bottom{
            border-bottom: 0;
            padding-bottom: 0;
        }
        .text-min{
            width: 100%;
            padding: r(30px) r(30px) r(33px) r(29px);
            font-size: 0;
            h3{
                font-size: 14px;
                padding-bottom: r(18px);
            }
            .text-imgbox{
                display: flex;
                justify-content: space-between;
                .text-img{
                    width: r(188px);
                    height: r(123px);
                    img{
                        width: 100%;
                    }
                }
            }
            .min-bottom{
                width:100%;
                color:#C5C5C5;
                padding-top: r(14px);
                .tou-img{
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    display: inline-block;
                    vertical-align: middle;
                    img{
                        width: 100%;
                        border-radius: 50%;
                    }
                }
                .name{
                        display: inline-block;
                        font-size: 10px;
                        padding-left: r(9px);
                        vertical-align: middle;
                    }
                .comment{
                    display: inline-block;
                    vertical-align: middle;
                    padding-left: r(14px);
                    img{
                        width: r(19px);
                        height: r(16px);
                    }
                    span{
                        font-size: 18px;
                        padding-left: r(5px);
                        display: inline-block;
                    }
                    i{
                        font-size: r(18px);
                    }
                }
                .stern{
                    display: inline-block;
                    vertical-align: middle;
                    width: r(264px);
                    text-align: right;
                    .day{
                        font-size: 10px;
                        display: inline-block;
                    }
                    .remark{
                        font-size: 12px;
                        display: inline-block;
                    }
                }
            }
        }
        .load{
            width: 100%;
            padding: 0 r(30px) r(33px) r(29px);
            text-align: center;
            a{
                display:block;
                color:#bbbbbb;
                font-size:22px;
            }
        }
    }
    footer{
        position: absolute;
        bottom: 0;
        left: 0;
        background: #f5f5f5;
        width: 100%;
        height: r(96px);
        border-top: 1px solid #cccacb;
        .bottom{
            display: inline-block;
            font-size: 0;
//          padding-top: r(13px);
//          padding-bottom: r(11px);
            a{
                color: #8b8b8b;
            }
            li{
                display: inline-block;
                text-align: center;
                font-size:0; 
                border-right: 1px solid #ececec;
//              line-height:r(50px); 
                &:first-of-type{
                    width: r(125px);
                    img{
                        width: r(47px);
                        height: r(38px);
                    }
                }
                &:nth-of-type(2){
                    width: r(127px);
                    img{
                        width: r(48px);
                        height: r(40px);
                    }
                }
                &:nth-of-type(3){
                    width: r(126px);
                    img{
                        width: r(41px);
                        height: r(41px);
                    }
                }
                &:nth-of-type(4){
                    width: r(127px);
                    img{
                        width: r(42px);
                        height: r(46px);
                    }
                }
                &:nth-of-type(5){
                    width: r(131px);
                    border-right: 0;
                    img{
                        width: r(70px);
                        height: r(43px);
                    }
                }
                p{
                    font-size: r(18px);
                    padding-top: r(12px);
                }
            }
        }
    }
}
.footer{
    color: #b60409;
}
@media(min-width:768px){
    .web header .header-box .liebiao i{
        font-size: 50px;
    }
}
@media(min-width:320px){
    .web .content .text-min .min-bottom .comment span{
        font-size: r(16px);
    }
}
